---
title: "Accessibility Checker Rule Help: Rpt_Aria_MultipleMainsVisibleLabel_Implicit"
---
import "../../../styles/ToolHelp.scss"
import { CodeSnippet, Tag } from "carbon-components-react";

<div className="toolHelp">
<Row>
<Column colLg={16} colMd={8} colSm={4} className="toolHead">

### Multiple elements with a `"main"` role do not have unique visible labels

<div id="locLevel"></div>

Each element with a `"main"` role should have a visible label that is unique

</Column>
</Row>
<Row>
<Column colLg={11} colMd={5} colSm={4} className="toolMain">

### Why is this important?

Elements with a `"main"` role are a type of region used to enclose the main content on the page. Providing a visible label for each main region on the page provides better context to all users including people using assistive technologies who rely on landmarks, to identify and navigate to the main content.

<div id="locSnippet"></div>

### What to do

 * For each `<main>` element or element with `role="main"`, set the value of the `aria-labelledby` attribute to the `id` value of any visible text that appropriately and uniquely describes that main content.

For example:

<CodeSnippet type="multi" light={true}>&lt;h1 id="weather"&gt;Weather portlet&lt;/h1&gt;
&lt;h1 id="stocks"&gt;Stock ticker portlet&lt;/h1&gt;
    
&lt;div role="main" aria-labelledby="weather"&gt;
    ...
&lt;/div&gt;
    
&lt;div role="main" aria-labelledby="stocks"&gt;
    ...
&lt;/div&gt;</CodeSnippet>

</Column>
<Column colLg={5} colMd={3} colSm={4} className="toolLeft">

### About this requirement

[IBM 2.4.1 Bypass Blocks](https://www.ibm.com/able/requirements/requirements/#2_4_1)

### Who does this affect?

* Blind people using screen readers

</Column>
</Row>
</div>

export default ({ children, _frontmatter }) => (<React.Fragment>{children}</React.Fragment>)
